import { defineComponent, PropType, ref } from 'vue';
import { AudioOrigin } from '../../type';
import useModule from './index.module';
import styles from './index.module.scss';

export default defineComponent({
  name: 'AudioControl',
  props: {
    /** 传入音频的相关数据 */
    audioData: {
      type: Object as PropType<AudioOrigin>,
      default: () => {
        return {};
      }
    }
  },
  setup(props, { emit }) {
    const audioRef = ref(null);
    const {
      methods,
      currentAudio,
      currentTimeComputed,
      maxTimeComputed,
      playTimeInput,
      isDraging
    } = useModule(props, { emit }, audioRef);
    return () => <div class={styles.control}>
      <div class={styles.action}>
        <span
          class={styles.quickPrev}
          title='快退5秒'
          onClick={methods.quickPrev}
        />
        <span
          class={{
            [styles.isPlay]: !currentAudio.data.playing,
            [styles.isPause]: currentAudio.data.playing
          }}
          onClick={methods.playControl}
        />
        <span
          class={styles.quickNext}
          title='快进5秒'
          onClick={methods.quickNext}
        />
      </div>
      <div class={styles.progress}>
        <div class={styles.progress_info}>
          <span title={currentAudio.origin.resource?.name ?? ''}>
            {
              currentAudio.origin.resource?.name ?? '暂无音频'
            }
          </span>
          <span
            v-loading={currentAudio.data.waiting}
          >
            {
              currentTimeComputed.value
            }/
            {
              maxTimeComputed.value
            }
          </span>
        </div>
        <div
          onmousedown={() => (isDraging.value = true)}
          onmouseup={() => (isDraging.value = false)}
        >
          <el-slider
            v-model={currentAudio.data.processTime}
            format-tooltip={methods.formatToolTip}
            onChange={methods.changeProcessTime}
          />
        </div>
      </div>
      <div class={styles.inputTime}>
        <el-input
          size='medium'
          v-model={playTimeInput.value}
          onFocus={methods.pause}
        />
        <el-button
          type='primary'
          size='medium'
          onClick={methods.changeTime}
        >播放</el-button>
      </div>
      <div class={styles.volume}>
        <span
          class={[
            currentAudio.data.muted ? [styles.isMute] : [styles.isUnmute]
          ]}
          onClick={methods.changeVolumnMuted}
        />
        <el-slider
          class={styles.slider}
          v-model={currentAudio.data.volume}
          format-tooltip={methods.formatVolumnToolTip}
          onChange={methods.changeVolumn}
        />
    </div>
      <audio
        ref={audioRef}
        src={currentAudio.origin.resource.url}
        preload={currentAudio.data.preload}
        onPlay={methods.onPlay}
        onError={methods.onError}
        onWaiting={methods.onWaiting}
        onPause={methods.onPause}
        onTimeupdate={methods.onTimeupdate}
        onLoadedmetadata={methods.onLoadedmetadata}
      />
    </div>
  }
})
